<script lang="ts" setup>

import {useUserStore} from "@/stores/user";
import {ref} from "vue";
import {IMessage} from "@/components/aw-message/message";
import {useIndexListModelStore} from "@/stores/indexListModel";

const userStore = useUserStore()

const sPopup = ref()
/**
 * 登录/登出
 */
const clickLogin = () => {
  if (!userStore.userInfoData) {
    return uni.navigateTo({url: '/subPkg/login/login'})
  }
  sPopup.value.open()
}
const onConfirmLogout = () => {
  userStore.clearUserInfo()
}
const goFeedback = () => {
  if (!userStore.userInfoData) {
    return IMessage({
      content: '请先登录',
      type: 'error'
    })
  }
  uni.navigateTo({url: '/subPkg/feedback/feedback'})
}
const contactUs = () => {
  uni.showModal({
    title: '联系我们',
    content: '联系邮箱：elysiawain@163.com',
    confirmText: '点击复制',
    confirmColor: '#39c5bb',
    success(res) {
      if (res.confirm) {
        uni.setClipboardData({
          data: 'elysiawain@163.com',
          success() {
            uni.showToast({
              title: '已复制邮箱',
              icon: 'none'
            })
          }
        })
      }
    }
  })
}
const aboutApp = () => {
  uni.navigateTo({url: '/subPkg/aboutUs/aboutUs'})
}
const goAuth = () => {
  uni.openAppAuthorizeSetting()
}
const indexListModelStore = useIndexListModelStore()
</script>

<template>
  <view class="viewport">
    <!-- 列表1 -->
    <!-- 列表2 -->
    <view class="list">
      <button class="item flex justify-between " hover-class="none" @click="goAuth">授权管理
        <text class="cuIcon-right text-gray"></text>
      </button>
      <button class="item flex justify-between" hover-class="none" @click="goFeedback">问题反馈
        <text class="cuIcon-right text-gray"></text>
      </button>
      <button class="item flex justify-between" hover-class="none" open-type="contact" @click="contactUs">联系我们
        <text class="cuIcon-right text-gray"></text>
      </button>
      <view class="item text-gray flex justify-between align-center" hover-class="none" style="gap: 10px;">
        <text>首页是否启用图集模式</text>
        <uv-switch v-model="indexListModelStore.graphicModel" :active-color="'#39c5bb'"
                   :inactive-color="'#f3f4f6'"></uv-switch>
      </view>
      <view class="item text-gray flex justify-between align-center" hover-class="none" style="gap: 10px;">
        <text>开启首页悬浮按钮</text>
        <uv-switch v-model="indexListModelStore.showChangeBtn" :active-color="'#39c5bb'"
                   :inactive-color="'#f3f4f6'"></uv-switch>
      </view>
    </view>
    <!-- 列表3 -->
    <view class="list">
      <view class="item cuIcon-info text-gray flex " hover-class="none" style="gap: 10px;" url=" " @click="aboutApp">
        关于动物世界
      </view>
    </view>
    <!-- 操作按钮 -->
    <view class="action">
      <view class="button round bg-gradual-awGreen text-white" @click="clickLogin">{{
          userStore.userInfoData ? '退出登录' : '登录'
        }}
      </view>
    </view>
  </view>
  <!--  弹出层-->
  <uni-popup ref="sPopup" type="center">
    <uni-popup-dialog confirm-text="退出登录" content="确定要退出登录吗？" title="提示"
                      type="info" @confirm="onConfirmLogout">
    </uni-popup-dialog>
  </uni-popup>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.viewport {
  padding: 20rpx;
}

/* 列表 */
.list {
  padding: 0 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 10rpx;

  .item {
    line-height: 90rpx;
    padding-left: 10rpx;
    font-size: 30rpx;
    color: #333;
    border-top: 1rpx solid #ddd;
    position: relative;
    text-align: left;
    border-radius: 0;
    background-color: #fff;

    &::after {
      width: auto;
      height: auto;
      left: auto;
      border: none;
    }

    &:first-child {
      border: none;
    }

    &::after {
      right: 5rpx;
    }
  }
}

/* 操作按钮 */
.action {
  text-align: center;
  line-height: 90rpx;
  margin-top: 40rpx;
  font-size: 32rpx;
  color: #333;

  .button {
    background-color: #fff;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
  }
}
</style>
